<!--
 * @Author: 刘晟勇
 * @Date: 2021-10-12 18:52:24
 * @LastEditTime: 2021-10-22 17:10:37
 * @Description: app主组件
-->
<template>
  <div id="app">
    <transition :name="fadeName">
      <router-view class="router-view" :key="$route.fullPath"/>
    </transition>
  </div>
</template>

<script>
export default {
  name: 'App',
  data() {
    return {
      startIndex: 1,
      fadeName: 'fade-rigth'
    }
  },
  created() {
    if (sessionStorage.isLogin === 'true') {
      this.$store.dispatch('getInfo')
    }
  },
  watch: {
    $route() {
      if (this.startIndex <= this.$route.meta.index) {
        this.fadeName = 'fade-rigth'
      } else {
        this.fadeName = 'fade-left'
      }
      this.startIndex = this.$route.meta.index
    }
  }
}
</script>

<style lang="scss">
// 从右到左的 入场动画
.fade-rigth-enter,
.fade-left-leave-to { // fade-left-leave-to  从左到右的离场
  opacity: 0;
  transform: translateX(100%)
}

// 需要给谁加过度动画
.fade-rigth-enter-active,
.fade-left-enter-active,
.fade-left-leave-to,
.fade-rigth-leave-to{ // 一定要设置 入场 离场的 动画
  transition: all 0.6s ease;
}


// 从左边移动到右边
.fade-left-enter,
.fade-rigth-leave-to { // fade-rigth-leave-to 从右到左动画的离场动画
  opacity: 0;
  transform: translateX(-100%)
}


// 解决过度动画中间 留白的问题
.router-view {
  width: 100%;
  // height: 100%;
  position: absolute;
  top: 0;
  // bottom: 0;
  margin: 0 auto;
  // 滚动的 兼容样式
  -webkit-overflow-scrolling: touch;
}

</style>
